<template>
  <div class="list-table">
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="500"
      :header-cell-style="{background:'#eee',color:'#000'}"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column prop="date" label="下单日期"> </el-table-column>
      <el-table-column prop="id" label="订单号">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{
            scope.row.id
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status == '待发货'"><div style="width:8px;height:8px;background:#FFA900;margin-right:5px;border-radius: 50%;display:inline-block;"></div>{{ scope.row.status }}</div>
          <div
            v-else-if="scope.row.status == '部分发货'"><div style="width:8px;height:8px;background:#3300FF;margin-right:5px;border-radius: 50%;display:inline-block;"></div>{{ scope.row.status }}</div
          >
          <div
            v-else-if="scope.row.status == '全部发货'"><div style="width:8px;height:8px;background:#32B457;margin-right:5px;border-radius: 50%;display:inline-block;"></div>{{ scope.row.status }}</div
          >
        </template>
      </el-table-column>
      <el-table-column prop="model" label="型号"> </el-table-column>
      <el-table-column prop="currency" label="币种"></el-table-column>
      <el-table-column prop="money" label="订单金额">
        <template slot-scope="scope">
          <div style="color:#32B457;">{{ scope.row.money }}</div>
        </template> 
         </el-table-column>
      <el-table-column prop="advance" label="预付款">
        <template slot-scope="scope">
          <div style="color:#FF7600;">{{ scope.row.advance }}</div>
        </template> 
      </el-table-column>
      <el-table-column prop="desc" label="备注"> </el-table-column>
    </el-table>
    <div>
      <el-pagination
        class="pagination"
        layout="total,sizes,prev, pager, next,jumper"
        :total="50"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "listTable",
  data() {
    return {
      tableData: [
        {
          Key: 1,
          ID: 1,
          date: "2023-02-20",
          id: "DD22020000294",
          status: "待发货",
          model: "H1 H2 H3 H4",
          currency: "人民币",
          money: "1000.00",
          advance: "300.00",
          desc: "",
        },
        {
          Key: 2,
          ID: 2,
          date: "2023-02-20",
          id: "DD22020000294",
          status: "部分发货",
          model: "H1 H2 H3 H4",
          currency: "人民币",
          money: "1000.00",
          advance: "300.00",
          desc: "",
        },
        {
          Key: 2,
          ID: 2,
          date: "2023-02-20",
          id: "DD22020000294",
          status: "全部发货",
          model: "H1 H2 H3 H4",
          currency: "人民币",
          money: "1000.00",
          advance: "300.00",
          desc: "",
        },
      ],
      // tableData:[],
    };
  },
  methods: {
    //详情
    handleDetail(row) {
      console.log('tag',row)
      this.$router.push({name:'transiListDetail',params:{status:row.status}});
      window.sessionStorage.state = row.status
    },
  },
};
</script>

<style scoped lang="scss">
.list-table {
  margin-top: 18px;
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>